<!--
 * @Author: Zcl84765
 * @Date: 2023-01-19 13:55:42
 * @LastEditors: Zcl84765
 * @LastEditTime: 2023-02-13 17:46:18
-->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>demo管理</el-breadcrumb-item>
      <el-breadcrumb-item>demo2</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div v-for="it in cityData" :key="it.id">
        {{ it.name }}

        <span v-for="item in it.child" :key="item.id">{{ item.name }}</span>
      </div>

      <!-- {{ uInfo.Info.name }}{{ uInfo.Info.age }}{{ uInfo.Info.sex }}
      <el-button type="primary" @click="changeHandle"
        >点击改变vuex的值</el-button
      >
      <el-button type="primary" @click="asyncchangeHandle"
        >异步点击改变vuex的值</el-button
      >


      {{ name }} -->
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  data() {
    return {
      info: {},
      op: {
        value: 'id',
        label: 'name',
        children: 'child',
      },
      cityData: [
        {
          name: '陕西',
          id: 1,
          child: [
            {
              name: '西安',
              id: 1,
              child: [
                { name: '雁塔', id: 111 },
                { name: '高新', id: 112 },
                { name: '未央', id: 113 },
                { name: '莲湖', id: 114 },
                { name: '浐灞', id: 115 },
                { name: '西咸', id: 116 },
              ],
            },
            {
              name: '宝鸡',
              id: 2,
              child: [
                { name: '渭滨', id: 121 },
                { name: '高新', id: 122 },
                { name: '扶风', id: 123 },
                { name: '岐山', id: 124 },
              ],
            },
          ],
        },
        {
          name: '四川',
          id: 2,
          child: [
            {
              name: '成都',
              id: 1,
              child: [
                { name: '成都雁塔1', id: 211 },
                { name: '成都高新1', id: 212 },
                { name: '成都未央1', id: 213 },
                { name: '成都莲湖1', id: 214 },
                { name: '成都浐灞1', id: 215 },
                { name: '成都西咸1', id: 616 },
              ],
            },
            {
              name: '乐山',
              id: 2,
              child: [
                { name: '乐山渭滨', id: 221 },
                { name: '乐山高新', id: 222 },
                { name: '乐山扶风', id: 223 },
                { name: '乐山岐山', id: 224 },
              ],
            },
          ],
        },
      ],
    }
  },
  created() {},
  computed: {
    ...mapState(['uInfo', 'name']),
  },
  methods: {
    ...mapActions('uInfo', ['ASYNCSETINFO']),

    ...mapMutations('uInfo', ['setUsersInfo']),

    ...mapMutations(['nameChanage']),

    changeHandle() {
      // this.$store.commit('uInfo/setUsersInfo', {
      //   name: 'ls',
      //   age: 20,
      //   sex: '女',
      // })
      this.setUsersInfo({
        name: 'ls',
        age: 20,
        sex: '女',
      })

      this.nameChanage('zcl xxx')
    },
    asyncchangeHandle() {
      // this.$store.dispatch('uInfo/ASYNCSETINFO', {
      //   name: 'ww',
      //   age: 80,
      //   sex: '人妖',
      // })
      this.ASYNCSETINFO({
        name: 'ww',
        age: 80,
        sex: '人妖',
      })
    },
  },
}
</script>

<style></style>
